<template>
	<div class="content-wrapper">
    <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
		<match-info :data.sync="merInfo"></match-info>
    <div class="contentMiddle">
        <ul class="el-menu el-menu--horizontal match-menu">
          <router-link tag="li" :to="'/sponsor/merchants/manage/'+id" class="el-menu-item">竞标管理</router-link>
          <!--<router-link tag="li" :to="'/sponsor/merchants/track/'+id" class="el-menu-item">执行跟踪</router-link>-->
          <router-link tag="li" :to="'/sponsor/merchants/material/'+id" class="el-menu-item">品牌素材</router-link>
          <router-link tag="li" :to="'/sponsor/merchants/compact/manage/'+id" class="el-menu-item">合同管理</router-link>
          <router-link tag="li" :to="'/sponsor/merchants/fulfil/'+id" class="el-menu-item">合同履行</router-link>
          <router-link tag="li" :to="'/sponsor/merchants/sponsorship/'+id" class="el-menu-item">赞助</router-link>
        </ul>
        <router-view :merEndTime.sync="merInfo.merEndTime" :id="id"></router-view>
    </div>
	</div>
</template>
<script>
  import MatchInfo from '../components/MatchInfo'
  import api from 'api/merchants'
  export default{
    components: {
      MatchInfo
    },
    data () {
      return {
        id: this.$route.params.id,
        merInfo: {}
      }
    },
    created () {
      api.manage_detail({
        id: this.id
      }).then((json) => {
        this.merInfo = json.data
      }, () => {
        this.$router.push({path: '/sponsor/merchants'}) // 接口错误，跳回
      })
    },
    computed: {
      luyou () {
        return this.$route.path.indexOf('history') > -1 ? 'history' : 'sponsor/business/manage'
      }
    }
  }
</script>
<style scoped>
.content-wrapper {
  background: #ebf0f5;
}
.contentMiddle {
  margin-top: 20px;
  background: #fff;
}
.router-link-active,.router-link-exact-active,.router-link-active.el-menu-item:hover,.router-link-exact-active.el-menu-item:hover{
  border-bottom: 2px solid #00bb90;
  color: #00bb90;
}
.match-menu{
  padding: 0 60px;
}
.match-menu li {
  font-size: 16px;
}
</style>
